<script setup lang="ts">
import { RouterLink, RouterView, useRoute } from 'vue-router'
import { useEditorStore } from './stores/EditorStore';
import { useBoardDefaultStore } from './stores/BoardStore';
import { storeToRefs } from 'pinia';
const { saveData, loadData } = useEditorStore();
const route = useRoute()
const { board } = storeToRefs(useBoardDefaultStore())
function negation() {
  board.value.setInteracting(!board.value.isInteracting())
}
</script>

<template>
  <header>
    <div class="w-full flex justify-between bg-blue-200 p-5">

      <nav>
        <RouterLink to="/">Home</RouterLink>
        <RouterLink to="/editor">Editor</RouterLink>
        <RouterLink to="/preview">Preview</RouterLink>
      </nav>

      <tool class="" v-show="route.path === '/editor'">
        <span class="mr-5 px-5 py-3 to-blue-950 border border-blue-300 hover:bg-blue-300 cursor-pointer shadow-md"
          @click="saveData()">Save</span>
        <span class="mr-5 px-5 py-3 to-blue-950 border border-blue-300 hover:bg-blue-300 cursor-pointer shadow-md"
          @click="loadData">load</span>
      </tool>
      <tool class="" v-show="route.path === '/preview'">
        <span class="mr-5 px-5 py-3 to-blue-950 border border-blue-300 hover:bg-blue-300 cursor-pointer shadow-md"
          @click="negation()">{{ (board?board.isInteracting():false) ? 'enable' : 'unable' }}</span>
      </tool>
    </div>
  </header>

  <RouterView />
</template>

<style scoped>
nav a {
  @apply p-2 mr-5 text-blue-900 border-collapse border-b-2 border-b-blue-300 hover:text-green-600
}
</style>
